<script setup lang="ts">
import { reqHospitalLevelAndRegion } from '@/apis/home';
import { ref, onMounted } from 'vue';
import { HospitalLevelAndRegionArr, HospitalLevelAndRegionResponseData } from '@/apis/home/type';
const regionArr = ref<HospitalLevelAndRegionArr>([])
// 判断标签高亮
const activeFlag = ref<string>('')
const $emit = defineEmits(['getRegion'])

onMounted(() => {
  getRegion()
})

const getRegion = async () => {
  const res: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion("Beijin")
  // console.log(res)
  if(res.code = 200){
    regionArr.value = res.data
  }
}

const changeRegion = (region: string) => {
  activeFlag.value = region
  // 触发自定义事件
  $emit('getRegion', region)
}
</script>



<script lang="ts">
export default {
  name: 'Region'
}
</script>

<script></script>

<template>
  <div class="region">
    <div class="content">
      <div class="left">地区:</div>
      <ul class="area">
        <li :class="{active: activeFlag===''}" @click="changeRegion('')">全部</li>
        <li :class="{active: activeFlag===region.value}" v-for="(region) in regionArr" :key="region.value" @click="changeRegion(region.value)">{{ region.name }}</li>
      </ul>
    </div>
  </div>
</template>



<style scoped lang="scss">
  .region{
  color: #7f7f7f;
  h1{
    font-weight:700;
    margin: 10px  0px;
  }
  .content{
    display: flex;
  }
  .left{
    margin-top: 10px;
    margin-right: 9px;
    margin-bottom: 10px;
    width: 42px;
  }
  .area{
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    li{
      margin: 10px 0 0 10px;
      &.active{
        color: #55a6fe;
      }
    }
    li:hover{
        color: #55a6fe;
        cursor: pointer;
      }
  }
}
</style>